<template>
  <div class="doubke-column">
    <div class="doubke-column-top">
      <span class="vertical"></span>
      <h3 class="doubke-column-title">{{title}}</h3>
    </div>
    <div class="doubke-column-contont">
      <div class="doubke-column-list" v-for="(item,index) in dataList" :key="index" @click="listFunc(item.id)">
        <img :src="item.thumb_url">
        <p class="doubke-column-name">{{item.name}}</p>
        <div class="doubke-column-contont-bottom" v-if="type=='organizer'">
          <i class="doubke-column-icon"></i>
          <span>{{item.popularity}}</span>
        </div>
      </div>
    </div>
    <div class="doubke-column-more" v-if="btnShow" @click="btnFunc">{{btnText}}</div>
  </div>
</template>

<script>
export default {
  props:{
    type:{type:String, default:''},
    dataList:{type:Array, default:[]},
    title:{type:String, default:''},
    btnText:{type:String, default:'按钮文本btnText'},
    btnShow:{type:Boolean, default:false},
    btnFunc:{type:Function, default:()=>{}},
    listFunc:{type:Function, default:()=>{}},
  },
}
</script>
<style lang='stylus' scoped>
  .doubke-column
    width 100%
    .doubke-column-top
      display flex
      background-color #fff
      padding 25rpx
      .vertical
        width 6rpx
        height 36rpx
        background-color black
      .doubke-column-title
        font-size 32rpx
        margin-left 14rpx
        font-weight 600
    .doubke-column-contont
      padding 20rpx
      display flex
      justify-content space-between
      align-items center
      flex-wrap wrap
      .doubke-column-list
        width 340rpx
        height 270rpx
        img
          width 100%
          height 180rpx
        .doubke-column-name
          font-size 14px
          line-height 16px
          color #333
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        .doubke-column-contont-bottom
          width 200rpx
          height 46rpx
          font-size 14px
          display flex
          align-items center
          .doubke-column-icon
            width 46rpx
            height 46rpx
            background-image url(./../../static/images/doubke_column_icon.png)
            background-repeat no-repeat
            background-size 46rpx 46rpx
          span
            color #f95757
            font-weight bold
            margin-left 10rpx
    .doubke-column-more
      width 200rpx
      height 60rpx
      background-color #f95757
      border-radius 10rpx
      font-size 14px
      text-align center
      line-height 60rpx
      color #ffffff
      margin 0 auto 40rpx
</style>